<template>
  <div>
    <div class="goodsImgList-mokuai">
      <!-- 数据模块 -->
      <div class="goodsImgList-index">
        <div class="goodsImgList-index-top">
          <div class="goodsImgList-name">
            <div class="goodsImgList-name-font">
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div class="goodsImg-name-right">
              <el-button @click="onSubmit">查询结果</el-button>
            </div>
            <div class="goodsImg-name-right" @click="packUp">
              <i class="el-icon-arrow-up"></i>
              收起筛选
            </div>
          </div>
          <div class="goodsImg-content">
            <!-- 筛选条件 -->
            <div class="goodsImg-button-select-2" v-if="showPrise">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item prop="name" label="输入搜索:">
                  <el-input v-model="formInline.name" placeholder="用户名/姓名" class="select-width-1"></el-input>
                </el-form-item>
                <el-form-item prop="roleId" label="所属部门:">
                  <el-select v-model="formInline.roleId" placeholder="所属部门">
                    <!-- 不要忘记 payTypeOptions 绑定到data中 -->
                    <el-option
                      v-for="option in roleOptions"
                      :key="option.id"
                      :label="option.name"
                      :value="option.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据模块 -->
      <div class="goodsImgList-index">
        <div class="goodsImgList-index-top">
          <div class="goodsImgList-name">
            <div class="goodsImgList-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="freightTemp-index-select">
              <div class="goodsImgList-left goodsImgList-index-select-button">
                <el-button @click="onSubmitImg" size="small">添加</el-button>
              </div>
              <div class="goodsImgList-left">
                <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
                  <el-form-item label>
                  </el-form-item>
                  <el-form-item label>
                    <el-select v-model="listLine.sort" placeholder="排序方式" class="select-width-2">
                      <el-option label="成员账号" :value="0"></el-option>
                      <el-option label="姓名" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="goodsImgList-content">
            <!-- 数据列表 -->
            <div>
              <el-table ref :data="tableData" tooltip-effect="dark" border style="width: 100%">
                <el-table-column prop="username" label="成员账号" width="90" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.username }}</template> -->
                </el-table-column>
                <el-table-column prop="nickName" label="姓名" width="90" align="center"></el-table-column>
                <el-table-column prop="email" label="邮箱地址" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleName" label="所属角色" width="80" align="center"></el-table-column>
                <el-table-column prop="createDate" label="添加时间" width="180" align="center"></el-table-column>
                <el-table-column prop="updateDate" label="最后登录" width="180" align="center"></el-table-column>

                <!-- <el-table-column label="是否启用" width="100" align="center">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.value"></el-switch>
                  </template>
                </el-table-column>-->

                <el-table-column fixed="right" label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodsImgList-paging">
              <!-- 分页 -->
              <div class="goodsImgList-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/settings/user";
import roleApi from "@/api/settings/role";
export default {
  data() {
    return {
      roleOptions: [],
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示10条数据,
      // 隐藏
      showPrise: true,
      // 筛选1
      formInline: {
        goodsImgName: "",
        status: ""
      },
      // 筛选2
      listLine: {
        row: "",
        sort: 0,
      },
      // 列表数据
      tableData: []
    };
  },
  created() {
    this.fetchData();
    //查询所属部门
    roleApi.findAll().then(response => {
      const resp = response.data;
      console.log("查询所有角色", resp.data);
      this.roleOptions = resp.data;
    });
  },

  watch:{
    "listLine.sort":function(){

        this.fetchData();
    }
  },
  methods: {
    //删除
    handleDelete(id) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(() => {
          userApi.deleteById(id).then(response => {
            const resp = response.data;
            this.$message({
              message: resp.msg,
              type: resp.code == 0 ? "success" : "error"
            });
            if (resp.code == 0) {
              // 删除成功，刷新列表数据
              this.fetchData();
            }
          });
        })
        .catch(() => {
          // 取消，不用理会
          console.log("取消");
        });
    },
    //条件查询
    onSubmit() {
      this.fetchData();
    },
    fetchData() {

      let dto={
  goodsImgName: this.formInline.goodsImgName,
        status: this.formInline.status,
        sort:this.listLine.sort

      }
      userApi
        .pageInfo(this.currentPage, this.pageSize, dto)
        .then(response => {
        
          const resp = response.data;
          this.tableData = resp.data.list;
          this.total = resp.data.totalRows;
        });
    },
    // 返回
    returnButton() {
      this.$router.replace({ path: "/goods/goodsImage" });
    },
    // 点击显示和隐藏
    packUp: function() {
      this.showPrise = !this.showPrise;
    },

    // 添加
    onSubmitImg() {
      this.$router.replace({ path: "/settings/MemberAdd" });
    },
    // 数据列表
    handleClick(user) {
      console.log("user:", user);
      this.$router.replace({
        path: "/settings/MemberAdd",
        query: { user: user }
      });
    },
    // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>

<style>
/* 筛选框 */
.goodsImg-content {
  width: 100%;
}
.goodsImg-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsImg-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 200px;
}
/* 自定义 */
.form-button-center {
  margin-left: 110px;
}
.select-width-2 {
  width: 100px;
}
.goodsImgList-left {
  float: left;
}
.goodsImgList-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsImgList-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsImgList-index-top {
  margin-top: 30px;
}
.goodsImgList-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodsImgList-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}

.freightTemp-index-select {
  width: 300px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsImgList-index-select-button {
  margin-right: 20px;
}
.goodsImgList-content {
  width: 100%;
  padding-top: 40px;
}
.goodsImgList-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.goodsImgList-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}

.goodsImgList-paging-layout {
  float: right;
  margin-top: 7px;
}
.custom-class {
  width: 30%;
  margin: auto;
}
</style>